<template>
    <div class="f-expected-box">
        <p>近期期待上映</p>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in expectedMoives" :key="item.id">
                    <div class="imgbox">
                        <img :src="item.img | imgFilter('170.230')">
                        <span>{{item.wish}}人想看</span>
                    </div>
                    <div class="text-box">
                        <h3>{{item.nm}}</h3>
                        <p>{{item.comingTitle}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import { mapActions, mapGetters } from 'vuex'
export default {
    data() {
        return {
            expectedMoives: null
        }
    },
    methods: {
        ...mapActions(['getExpected'])
    },
    computed: {
        ...mapGetters(['getExpecteds'])
    },
    async created() {
        await this.getExpected()
        this.expectedMoives = this.getExpecteds ? this.getExpecteds : []
        this.$nextTick(() => {
            new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 30
            })
        })
    }
}
</script>

<style lang="stylus" scoped>
    @import '~Css/movie-list.css'
    @import '~Css/_eliplise.styl'
    .f-expected-box 
        background #fff
        width 3.43rem
        padding .12rem .15rem
        margin-bottom .15rem
        p 
            margin: 0 0 12px;
            font-size: 14px;
            color: #333;
        .swiper-slide 
            width 1rem
            margin-right .1rem
            .imgbox
                width 1rem
                height 1.4rem 
                position relative
                overflow hidden
                img 
                    width 100% 
                    height 100%
                span 
                    display block
                    width 100% 
                    height .35rem
                    position absolute 
                    left 50%
                    margin-left -.5rem
                    bottom .04rem 
                    z-index 1000
                    color #faaf00
                    font-size .11rem
                    font-weight bold
                    text-align center
                    line-height .55rem
                    background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000)
            .text-box 
                padding-top .08rem
                h3
                    margin: 0 0 .03rem;
                    font-size: .13rem;
                    color: #222;
                    ellipsis()
                p 
                    margin: 0;
                    font-size: .12rem;
                    color: #999;
</style>
